{% macro progress_spinner(color) %}
<svg class="animate-spin h-5 w-5 {{ color }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  <path class="opacity-75" fill="currentColor"
    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
  </path>
</svg>
{% endmacro %}

{% macro success_check() %}
<span class="material-symbols-outlined text-green-600">
  check
</span>
{% endmacro %}

{% macro fail_cross() %}
<span class="material-symbols-outlined text-red-600">
  close
</span>
{% endmacro %}

{% macro error_exclamation() %}
<span class="material-symbols-outlined text-red-600">
  error
</span>
{% endmacro %}

{% macro cancel_circle() %}
<span class="material-symbols-outlined text-yellow-600">
  block
</span>
{% endmacro %}

{% macro pending_circle() %}
<span class="material-symbols-outlined text-gray-300">
  schedule
</span>
{% endmacro %}

{% macro batch_state_indicator(batch) %}
{% if batch['n_jobs'] - batch['n_completed'] > 0 %}
{{ progress_spinner('text-red-600' if batch['state'] == 'failure' else 'text-sky-600') }}
{% elif batch['state'] == 'success' %}
{{ success_check() }}
{% elif batch['state'] == 'failure' %}
{{ fail_cross() }}
{% elif batch['state'] == 'cancelled' %}
{{ cancel_circle() }}
{% endif %}
{% endmacro %}

{% macro job_state_indicator(job) %}
{% if job['state'] == 'Running' %}
{{ progress_spinner('text-sky-600') }}
{% elif job['state'] == 'Success' %}
{{ success_check() }}
{% elif job['state'] == 'Failed' %}
{{ fail_cross() }}
{% elif job['state'] == 'Error' %}
{{ error_exclamation() }}
{% elif job['state'] == 'Cancelled' %}
{{ cancel_circle() }}
{% else %}
{{ pending_circle() }}
{% endif %}
{% endmacro %}

{% macro danger_button(text) %}
<button class='border border-gray-200 bg-gray-50 hover:bg-red-700 text-red-500 hover:text-white px-2 py-1 rounded-md'>
  {{ text }}
</button>
{% endmacro %}

{% macro submit_button(text) %}
<button class='border border-gray-200 bg-gray-50 hover:bg-slate-400 hover:text-white px-2 py-1 rounded-md'>
  {{ text }}
</button>
{% endmacro %}


{% macro submit_button_with_attrs(text, attrs) %}
<button class='border border-gray-200 bg-gray-50 hover:bg-slate-400 hover:text-white px-2 py-1 rounded-md' {{ attrs }}>
  {{ text }}
</button>
{% endmacro %}


{% macro link(href, text) %}
<a class='block hover:cursor-pointer hover:text-sky-600 hover:underline underline-offset-2' href="{{ href }}">
  {{ text }}
</a>
{% endmacro %}

{% macro truncated_link(href, text) %}
<a class='block hover:cursor-pointer hover:text-sky-600 hover:underline underline-offset-2 truncating-text'  href="{{ href }}">
  {{ text }}
</a>
{% endmacro %}
